<template>
  <div class="m-investment-manage">
    <p class="m-title">投资管理</p>
    <!-- 投资资产 -->
    <div class="m-account-all m-all-item">
      <div class="m-invest-l">
        <span class="title">已投资总额(元)</span>
        <br>
        <span class="all">0.00</span>
      </div>
      <div class="m-invest-r">
        <div>
          <div class="m-all-item">
            <span class="title">累计收益(元)</span>
            <br>
            <span class="other">0.00</span>
          </div>
          <div class="m-all-item">
            <span class="title">已赚收益(元)</span>
            <br>
            <span class="other">0.00</span>
          </div>
          <div class="m-all-item">
            <span class="title">待收收益(元)</span>
            <br>
            <span class="other">0.00</span>
          </div>
        </div>
        <div>
          <div class="m-all-item">
            <span class="title">累计投资(元)</span>
            <br>
            <span class="other">0.00</span>
          </div>
          <div class="m-all-item">
            <span class="title">已回收投资(元)</span>
            <br>
            <span class="other">0.00</span>
          </div>
          <div class="m-all-item">
            <span class="title">待回收投资(元)</span>
            <br>
            <span class="other">0.00</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 投资列表 -->
    <div class="m-invest-list">
      <w-tab-select :options="options" @on-change="_changeSelected">
        <!-- 搜索条件 -->
        <div class="m-search">
          <div class="item">
            <span class="title">投资状态：</span>
            <div class="m-input">
              <w-select></w-select>
            </div>
          </div>
          <div class="m-search-btn">
            <w-button type="main">查询</w-button>
          </div>
        </div>
        <!-- 搜索列表 -->
        <div class="m-table-list">
          <w-table :columns="columns">
            <tr>
              <td>
                <p>2018-09-12 10:42:38</p>
              </td>
              <td>
                <span>80000.00</span>
              </td>
              <td>
                <span>浙江农商行</span>
              </td>
              <td>
                <span>62228211920001821603</span>
              </td>
              <td>
                <span class="success">成功</span>
              </td>
              <td>
                <span>还款中/已完成/已结算</span>
              </td>
              <td>
                <span class="del" @click="jumpDetail">查看详情</span>
              </td>
            </tr>
          </w-table>
        </div>
      </w-tab-select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curIndex: 0,
      options: [
        {
          'label': '所有的投资',
          'value': '所有的投资'
        },
        {
          'label': '竞标中的投资',
          'value': '竞标中的投资'
        },
        {
          'label': '待回收的投资',
          'value': '待回收的投资'
        },
        {
          'label': '已回收的投资',
          'value': '已回收的投资'
        }
      ],
      columns: [
        {title: '项目名称', width: 'auto'},
        {title: '产品总额', width: 'auto'},
        {title: '投资金额', width: 'auto'},
        {title: '产品周期', width: 'auto'},
        {title: '预计年化收益率', width: 'auto'},
        {title: '项目状态', width: 'auto'},
        {title: '操作', width: 'auto'}
      ]
    }
  },
  methods: {
    /**
     * 切换选项卡
     */
    _changeSelected(index) {
      this.curIndex = index
    },
    /**
     * 跳转详情
     */
    jumpDetail() {
      window.open(`/product`)
    }
  }
}
</script>

<style lang="scss">
.m-account-all {
  .btn-option {
    .btn {
      width: 60px;
      height: 30px;
    }
  }
}

.m-invest-list {
  .m-tab-select {
    padding: 0 !important
  }
}
.m-table-list {
  margin-top: 20px;
  table {
    th {
      height: 34px !important;
      background-color: #FAFAFA;
      border-bottom: none !important
    }
  }
}
.m-search {
  .form-control {
    width: 180px;
    height: 30px;
  }
}
.m-search-btn {
  display: inline-block;
  .btn {
    width: 60px;
    height: 30px;
  }
}
</style>

<style lang="scss" scoped>
.m-title {
  font-size: 16px;
  margin-bottom: 20px; 
  font-weight: bold;
}
.del {
  cursor: pointer;
  color: #2A98D7
}
.m-account-all {
  position: relative;
  width: 990px;
  margin: -20px -20px 0;
  height: 226px;
  padding: 34px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../assets/my/my_bg_1.png) no-repeat;
  background-size: cover;
  .m-invest-l {
    flex: 1;
    height: 90px;
    position: relative;
    .title {
      top: 34px;
      font-size: 16px;
    }
    .all {
      position: absolute;
      bottom: 0px;
      font-size: 32px;
    }
  }
  .m-invest-r {
    flex: 3;
    & > div {
      display: flex;
      justify-content: center;
      align-items: center;
      &:first-child {
        margin-bottom: 56px;
      }
    }
    .m-all-item {
      span {
        // position: absolute;
        display: inline-block;
      }
      .other {
        // bottom: 34px;
        font-size: 24px;
      }
    }
  }
  .m-all-item {
    flex: 1;
  }
}
.m-search {
  .item {
    display: inline-block;
    margin-right: 30px;
    .title {
      font-size: 12px;
      display: inline-block;
    }
    .m-input {
      display: inline-block;
      & > div {
        display: inline-block;
      }
    }
  }
}
.m-table-list {
  p {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
